<template>
	<view>
    <view class="margin-top-sm padding-lr bg-white" v-if="!hasUserinfo">
      <loginNotice></loginNotice>
    </view>
		<view class="padding-tb bg-white padding-xl margin-tb-sm">
			<view class="flex justify-between align-center" @click="toUrl(hasUserinfo?'./center':'../auth/login')">
				<view class="flex">
					<view class="avatar">
						<image v-if="hasUserinfo" :src="user.avatar" mode="widthFix"></image>
						<image v-else src="/static/images/default-avatar.jpg" mode="widthFix"></image>
					</view>
					<view class="flex flex-direction justify-center padding-lr">
						<view v-if="hasUserinfo" class="text-lg text-bold text-black">{{user.username}}</view>
						<view v-else class="text-lg text-bold text-black">{{ tmpUser.username }}</view>
					</view>
				</view>
				<view>
					<view>
						<uni-icons type="forward" size="40" color="#8a8a8a"></uni-icons>
					</view>
				</view>
			</view>
		</view>

		<view class="text-black bg-white function-card margin-tb-sm">
			<view @click="toUrl('message/index')">
				<function-card-item label="消息中心" src="/static/icons/notice.svg"></function-card-item>
			</view>
			<view @click="toUrl('./thumbs-up')">
				<function-card-item label="我赞过的" src="/static/icons/thumbs-up.svg"></function-card-item>
			</view>
			<view @click="toUrl('./collection')">
				<function-card-item label="收藏集" src="/static/icons/star.svg"> </function-card-item>
			</view>
		</view>
		<view class="text-black bg-white function-card">
			<view @click="toUrl('./history')">
				<function-card-item label="阅读记录" src="/static/icons/eye.svg"></function-card-item>
			</view>
		</view>

	</view>
</template>

<script>
	import {mapGetters} from 'vuex';
	export default {
		data() {
			return {

			}
		},
    onShow: function() {
    },
		computed: {
			...mapGetters({
        hasUserinfo: 'user/hasUserinfo',
        user: 'user/getUserinfo',
        tmpUser: 'user/getTmpUserinfo'
			}),
		},
		methods: {
			toUrl(url) {
				uni.navigateTo({
					url
				})
			},
		}
	}
</script>

<style lang="scss">
	.avatar {
		width: 150upx;
		margin-right: 30upx;

		image {
			border-radius: 500upx;
		}
	}
</style>
